<template>
    <div class="layout__container">
        <header class="titlebar">
            <title-bar />
        </header>
        <div class="layout__nav">
            <div class="userinfo__main--part">
                <h4>v{{ version }}</h4>
                <n-avatar round size="medium" :src="userInfo.base64" @click="handleLogout" />
            </div>
            <div class="nav__bar">
                <div class="nav--list" :class="activeMenu === '/home' ? 'active' : ''" @click="changeMenu({
                    id: '0',
                    path: '/home',
                })">
                    <n-icon :size="22" :color="activeMenu === '/home' ? '#4090EF' : '#fff'">
                        <Home />
                    </n-icon>
                </div>
                <div class="nav--list" v-for="item in userMenu" :key="item.id"
                    :class="activeMenu === item.path ? 'active' : ''" @click="changeMenu(item)">
                    <n-icon :size="22" :color="activeMenu === item.path ? '#4090EF' : '#fff'">
                        <component :is="componentList[item.iconClass as IconName]" />
                    </n-icon>
                </div>
            </div>
            <div class="setting__footer">
                <n-icon :size="24" color="#fff" @click="handleLogout">
                    <PowerSharp />
                </n-icon>
            </div>
        </div>
        <div class="layout__content">
            <FullLoadingComp />
            <router-view v-slot="{ Component }">
                <keep-alive :include="['UserIndex','AccompIndex']">
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { Home, Person, Library, ReorderFourSharp,PowerSharp, Settings } from '@vicons/ionicons5';
import { useUserStore } from '@/stores/user';
import { useAppStore } from '@/stores/app';
import { useDialog, useMessage } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { removeToken } from '@/api/auth';
import EventEmiiter from '@/utils/EventEmiiter';
import { controlWindow } from '@/utils/windows';
import FullLoadingComp from '@/components/FullLoadingComp.vue';
import i18n from '@/locales';
const { t } = i18n.global;
const userStore = useUserStore();
const appStore = useAppStore();
type IconName = keyof typeof componentList;
const componentList: Record<string, Component> = {
    'Home': Home,
    'Person': Person,
    'Library': Library,
    'Settings': Settings,
    'ReorderFourSharp': ReorderFourSharp
};
const { userInfo, userMenu } = storeToRefs(userStore);
const { version } = storeToRefs(appStore);
const dialog = useDialog();
const router = useRouter();
const message = useMessage();
// 数据
const activeMenu = ref('/home');
const changeMenu = (menu: Partial<UserMenu>) => {
    activeMenu.value = menu.path!;
    router.push(menu.path!);
}
// 退出登录
const handleLogout = () => {
    dialog.warning({
        title: t('text.warning'),
        content: t('text.logoutText'),
        positiveText: t('text.confirm'),
        negativeText: t('text.cancel'),
        onPositiveClick: async () => {
            removeToken();
            userStore.clearUserInfo(router);
            await controlWindow('main', 'resize', { width: 315, height: 445 });
            router.push('/');
            message.success(t('text.outok'),);
        },
    })
}
onMounted(() => {
    EventEmiiter.on('VIEW:CHANGE_MENU', (path: string) => {
        activeMenu.value = path;
    })
})
</script>
<style scoped lang='scss'>
.layout__container {
    display: grid;
    grid-template-columns: 70px auto;
    grid-template-rows: 25px auto;
    grid-template-areas:
        "head head"
        "nav main";
    height: 100vh;
    overflow: hidden;

    .titlebar {
        grid-area: head;
        width: 100%;
        height: 100%;
    }

    .layout__nav {
        grid-area: nav;
        height: 100%;

        @include useTheme {
            background: getVar('navBarBg');
        }

        display: grid;
        grid-template-rows: 130px auto 100px;

        .userinfo__main--part {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 0.2rem 0;
            flex-direction: column;
            gap: 0.5rem;
            cursor: pointer;

            .n-avatar {
                flex-shrink: 0; // 禁止头像缩小
            }

            h4 {
                font-size: 0.75rem;

                @include useTheme {
                    color: getVar('text');
                }

                font-weight: 500;
            }
        }

        .nav__bar {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;

            .nav--list {
                width: 40px;
                height: 40px;
                cursor: pointer;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: .37s all;

                &:hover {
                    @include useTheme {
                        background: getVar('navBg');
                    }
                }

                &.active {
                    @include useTheme {
                        background: getVar('navBg');
                    }
                }
            }
        }

        // 底部
        .setting__footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-direction: column;
            padding-bottom: 1rem;
            cursor: pointer;
        }
    }

    .layout__content {
        overflow: overlay; // 仅需要这一行
        grid-area: main;
        height: 100%;
        width: 100%;
    }
}
</style>